<template>
  <div class="after-node-btn" @click="visible = true">
    <el-popover placement="right" v-model="visible" trigger="click" title="添加节点" width="372">
      <div mode="vertical" class="flow-ant-menu-vertical">
        <div key="1" @click="addType(1)">
          <el-icon>
            <Stamp/>
          </el-icon>
          <span>审批节点</span>
        </div>
        <div key="4" @click="addType(4)">
          <el-icon>
            <Stamp/>
          </el-icon>
          <span>分支节点</span>
        </div>
        <div key="7"
            @click="addType(7)"
        >
          <el-icon>
            <Stamp/>
          </el-icon>
          <span>意见分支</span>
        </div>
        <div key="9"
            @click="addType(9)"
        >
          <el-icon>
            <Stamp/>
          </el-icon>
          <span>并行分支</span>
        </div>
        <div key="2" @click="addType(2)">
          <el-icon>
            <Stamp/>
          </el-icon>

          <span>抄送节点</span>
        </div>
        <div key="6" @click="addType(6)">
          <el-icon>
            <Stamp/>
          </el-icon>

          <span>办理节点</span>
        </div>
        <div key="20" @click="addType(20)">
          <el-icon>
            <Stamp/>
          </el-icon>
          <span>通知节点</span>
        </div>
        <div key="5" @click="addType(5)">
          <el-icon>
            <Stamp/>
          </el-icon>
          <span>事件节点</span>
        </div>
      </div>
      <!-- 当审批节点下添加意见分支,就不允许添加其他类型的节点了 -->
      <template #reference>
        <el-button
            :icon="Plus"
            v-if="!readable && (nodeType.value != 1 || (nodeType.value == 1 && node.addable))"
            circle
        />
      </template>
    </el-popover>
  </div>
</template>
<script setup name="FlowAddNode">
import {Plus} from "@element-plus/icons-vue";
import useFlowHook from "@/hook/useFlowHook";

import {
  reactive,
  ref,
  createApp,
  defineEmits,
  defineProps,
  toRefs,
  getCurrentInstance,
} from "vue";
import {useStore} from "vuex";
/* 组件局部注册 */
const store = useStore();
/* 组件局部注册 */
const app = createApp({});
const {currentInstance, proxy} = getCurrentInstance();

const {uuid} = useFlowHook();

const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return {
        addable: true,
      };
    },
  },
  nodeType: {
    type: Number,
    default: 1,
  },
  id: {
    type: String,
    default: "",
  },
  readable: {
    type: Boolean,
    default: false,
  },
});

const {node, nodeType, id, readable} = toRefs(props);

//定义一个数据
const visible = ref(false);

//vue3 中methods
const addType = (type) => {
  var addNode = null;
  if (type == 1 || type == 6) {
    addNode = proxy.$deepCopy(addApproverNode(type));
  } else if (type == 2) {
    addNode = proxy.$deepCopy(addCcNode(type));
  } else if (type == 4) {
    addNode = proxy.$deepCopy(addBranchNode(type));
  } else if (type == 5) {
    addNode = proxy.$deepCopy(addEventNode(type));
  } else if (type == 7) {
    addNode = proxy.$deepCopy(addSuggestNode(type));
  } else if (type == 9) {
    addNode = proxy.$deepCopy(addParallelNode(type));
  } else if (type == 20) {
    addNode = proxy.$deepCopy(addNoticeNode(type));
  }

  let currNode = node.value;
  let flowType = nodeType.value;
  let nodeId = id.value;
  console.log("----------添加节点开始-------------->", nodeType.value, flowType, nodeId);

  store.dispatch("process/addNode", {addNode, currNode, flowType, nodeId});
  if (flowType == 1 && type == 7) {
    // 当审批节点下添加意见分支,就不允许添加其他类型的节点了
    store.dispatch("process/updateNode", {
      currNode,
      field: "addable",
      value: false,
    });
  }
  console.log("节点添加成功--------------")
};

/**
 * 添加审批节点 ||
 */
const addApproverNode = (type) => {
  return {
    id: uuid(),
    name: type == 1 ? "审批人" : "办理人",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    props: {
      // 审批人模式
      assignedType: 'ASSIGN_USER',
      // 审批方式
      approvalMode: 'NEXT',
      // 审批人与发起人为同一人时
      sameMode: 'AUTO',
      nobady: {
        //PASS 直接通过、 TO_ADMIN 转交主管理员、TO_USER 转交指定人员
        handler: "AUTO",
        //TO_USER 时的指定人员
        assignedUser:[]
      },
      refuse: {
        //TO_END 驳回直接结束流程、TO_NODE 驳回到指定节点、TO_BEFORE 驳回到上一级
        type: 'TO_END',
        target: '' //驳回到指定ID的节点
      },
      //指定主管审批
      leader:{
        level: 1 //发起人指定级别主管
      },
      role:[],
      //发起人自选
      selfSelect: {
        multiple: true // 是否多选 true/false
      },
      // 层级模式
      levelMode: 1,
      // 审批人ID
      approverIds: [],
      // 审批人名称
      approverNames: [],
      // 表单权限
      formPerms: [],
      // 高级配置
      configure: {},
    },
    // 子节点
    childNode: null,
    // 显示添加按钮
    addable: true,
    // 可删除提示
    deletable: false,
    // 是否有错误
    error: false,
    // 显示内容
    content: null,
  };
};
/**
 * 添加抄送节点
 */
const addCcNode = (type) => {
  return {
    id: uuid(),
    name: "抄送人",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    props: {
      // 抄送人设置
      approverGroups: [
        {
          id: uuid(),
          // 审批人模式
          approverType: 1,
          // 层级模式
          levelMode: 1,
          // 审批人ID
          approverIds: [],
          // 审批人名称
          approverNames: [],
        },
      ],
      // 表单权限
      formPerms: [],
      // 高级配置
      configure: {},
    },
    // 显示添加按钮
    addable: true,
    // 可删除提示
    deletable: false,
    // 是否有错误
    error: false,
    // 显示内容
    content: null,
  };
};
/**
 * 添加通知节点
 */
const addNoticeNode = (type) => {
  return {
    id: uuid(),
    name: "通知",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    props: {
      // 审批设置
      approverGroups: [
        {
          id: uuid(),
          // 审批人模式
          approverType: 1,
          // 层级模式
          levelMode: 1,
          // 审批人ID
          approverIds: [],
          // 审批人名称
          approverNames: [],
        },
      ],
    },
    // 显示添加按钮
    addable: true,
    // 可删除提示
    deletable: false,
    // 是否有错误
    error: false,
  };
};
/**
 * 添加事件节点
 */
const addEventNode = (type) => {
  return {
    id: uuid(),
    name: "事件",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    // 显示添加按钮
    addable: true,
    // 可删除提示
    deletable: false,
    // 是否有错误
    error: false,
  };
};
/**
 * 添加办理节点
 */
const addWriteNode = (type) => {
  return {
    id: uuid(),
    name: "办理",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    props: {
      // 表单权限
      formPerms: [],
    },
    // 显示添加按钮
    addable: true,
    // 可删除提示
    deletable: false,
    // 是否有错误
    error: false,
  };
};
/**
 * 添加分支节点
 */
const addBranchNode = (type) => {
  const uid = uuid();
  return {
    id: uid,
    name: "条件分支",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    // 显示添加按钮
    addable: true,
    // 条件节点
    branchs: [
      {
        id: uuid(),
        pid: uid,
        name: "分支1",
        type: 3,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 是否有错误
        error: false,
        // 子节点
        childNode: null,
        props: {
          // 分支类型
          branchType: 1,
          //条件表达式
          expression: "",
           // 优先级
          priorityLevel: 1,
            // 显示优先级
          showPriorityLevel: true,
          // 条件组
          conditionGroup: [],
        },
        // 显示添加按钮
        addable: true,
        // 可删除提示
        deletable: false,
      },
      {
        id: uuid(),
        pid: uid,
        name: "其他情况",
        type: 3,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 子节点
        childNode: null,
        props: {
          // 条件组
          conditionGroup: [],
          // 分支类型
          branchType: 1,
          //条件表达式
          expression: "",
          // 优先级
          priorityLevel: 2,
            // 显示优先级
          showPriorityLevel: true,
          // 流程基础配置属性
        },
        // 显示添加按钮
        addable: true,
        // 可删除提示
        deletable: false,
        // 是否有错误
        error: false,
        // 显示内容
        content: "其他情况进入此流程",
      },
    ],
  };
};
/**
 * 添加意见分支节点
 */
const addSuggestNode = (type) => {
  const uid = uuid();
  return {
    id: uid,
    name: "意见",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 子节点
    childNode: null,
    // 显示添加按钮
    addable: true,
    // 是否有错误
    error: false,
    branchs: [
      {
        id: uuid(),
        pid: uid,
        name: "同意",
        type: 8,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 子节点
        childNode: null,
        props: {
          // 优先级
          priorityLevel: 2,
        },
        // 显示添加按钮
        addable: true,
        // 可删除提示
        deletable: false,
        // 是否有错误
        error: false,
      },
      {
        id: uuid(),
        pid: uid,
        name: "不同意",
        type: 8,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 子节点
        childNode: null,
        props: {
          // 优先级
          priorityLevel: 2,
        },
        // 显示添加按钮
        addable: true,
        // 可删除提示
        deletable: false,
        // 是否有错误
        error: false,
      },
    ],
  };
};
/**
 * 添加并行节点
 */
const addParallelNode = (type) => {
  const uid = uuid();
  return {
    id: uid,
    name: "并行",
    type: type,
    // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
    status: -1,
    // 显示添加按钮
    addable: true,
    // 聚合节点
    childNode: {
      id: uuid(),
      pid: uid,
      name: "聚合",
      type: 11,
      status: -1,
      childNode: null,
      // 显示添加按钮
      addable: true,
      // 可删除提示
      deletable: false,
    },
    branchs: [
      {
        id: uuid(),
        pid: uid,
        name: "并行1",
        type: 10,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 是否有错误
        error: false,
        // 显示内容
        content: "并行任务",
        // 子节点
        childNode: null,
        // 显示添加按钮
        addable: true,
        // 可删除提示
        deletable: false,
        props: {
          // 分支类型
          branchType: 3,
          // 条件组
          conditionGroup: [],
        },
      },
      {
        id: uuid(),
        pid: uid,
        name: "并行2",
        type: 10,
        // 流程节点状态(用于只读模式, 0:未进行 1:进行中  2:已完成)
        status: -1,
        // 是否有错误
        error: false,
        // 显示内容
        content: "并行任务",
        // 子节点
        childNode: null,
        // 显示添加按钮
        addable: true,
        // 可删除提示
        deletable: false,
        props: {
          // 分支类型
          branchType: 3,
          // 条件组
          conditionGroup: [],
        },
      },
    ],
  };
};
</script>